<template>
  <el-container v-loading="loading">
    <div class="box">
      <h3>{{activeheader}}</h3>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="医院名称" prop="name">
            <el-input style="width:216px;" v-model="ruleForm.name" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="医院别名" prop="otherName">
            <el-input style="width:420px;" v-model="ruleForm.otherName" placeholder="请输入内容"></el-input> （多个别名请用英文逗号分隔）
        </el-form-item>
        <el-form-item label="医院类型" prop="type">
             <el-select style="width:216px;" v-model="ruleForm.type" placeholder="请选择">
              <el-option
                v-for="item in hopType"
                :key="item.id"
                :label="item.dValue"
                :value="item.dKey">
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="医院等级" prop="level">
             <el-select style="width:216px;" v-model="ruleForm.level" placeholder="请选择">
            <el-option
              v-for="item in hosLevelList"
              :key="item.id"
              :label="item.dValue"
              :value="item.dKey">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在地区" prop="province">
              <user-address @countryChange="getArea" :defaultValue="defaultAddress" ref="hosAddAddress" seletStyle="width:216px"/>
        </el-form-item>
        <el-form-item label="结算周期" prop="zhouqi">
          <el-select v-model="ruleForm.zhouqi" placeholder="请选择结算周期">
              <el-option
              v-for="item in zhouqiList"
              :label="item.label"
              :value="item.value">
            </el-option>
            
          </el-select>
        </el-form-item>
        <el-form-item label="对公转账" prop="publicTrans">
            <el-radio-group v-model="ruleForm.publicTrans">
              <el-radio label='0'>是</el-radio>
              <el-radio label='1'>否</el-radio>
            </el-radio-group>
            
        </el-form-item>
         <el-form-item label="开户银行" prop="bank">
            <el-input style="width:216px;" v-model="ruleForm.bank" placeholder="请输入内容"></el-input>
        </el-form-item>
         <el-form-item label="银行账号" prop="bankCardNum">
            <el-input style="width:216px;" v-model="ruleForm.bankCardNum" placeholder="请输入内容"></el-input>
        </el-form-item>

        <el-form-item label="医院电话" prop="phone">
             <el-input style="width:216px;" class="input-width" v-model="ruleForm.phone" placeholder="请输入内容"></el-input>
        </el-form-item>
         <el-form-item label="医院地址" prop="address">
             <el-input class="input-width" v-model="ruleForm.address" placeholder="请输入内容"></el-input>
        </el-form-item>
         <el-form-item label="医院简介" prop="info">
            <el-input
            type="textarea"
            :rows="2"
            size="medium"
            placeholder="请输入内容"
            v-model="ruleForm.info">
          </el-input>
        </el-form-item>
        <el-form-item label="社保医院" prop="shebao">
            <el-checkbox v-model="ruleForm.shebao" label= true >社保医院</el-checkbox>
            <el-checkbox v-model="ruleForm.zhifu" label= true >直付医院</el-checkbox>
            <el-checkbox v-model="ruleForm.mianya" label= true >住院免押金</el-checkbox>
            <el-checkbox v-model="ruleForm.register" label= true >注册</el-checkbox>
            <el-checkbox v-model="ruleForm.authentication" label= true >认证</el-checkbox>
            <el-checkbox v-model="ruleForm.choose" label= true >优选</el-checkbox>
        </el-form-item>
        <el-form-item label="备注信息" prop="remark">
           <el-input
            type="textarea"
            :rows="2"
            size="medium"
            placeholder="请输入内容"
            v-model="ruleForm.remark">
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button @click="cancle">取消</el-button>
        </el-form-item>  
      </el-form>  

    </div>
  </el-container>
</template>

<script>
import check from 'utils/check'
import { hopType, hosLevelList } from "data/listBody";
import UserAddress from "components/address";
let headers = ['新增医院','修改医院'];
let requireArray = ['name','type','level','province','city','country','shebao']; //必传字段

export default {
  name: 'hosAdd',
  data() {
    return {
      ruleForm:{
      name: '',
      otherName: '',
      type: '',
      level: '',
      phone: '',
      address: '',
      remark: '',
      info: '',
      shebao: false,
      province:'',
      city:'',
      country:'',
      zhouqi:'',
      zhifu:false,
      mianya:false,
      publicTrans:false,
      bank:'',
      bankCardNum:'',
      register:false,
      authentication:false,
      choose:false
      },
      defaultAddress: null, //默认地址
      loading: false,
      activeheader: headers[0],
      check: check.methods.check,
      checkTip: check.tips.checkTip,
      hopType,
      hosLevelList,
      zhouqiList:[
        {
          value:1,
          label:'月结'
        },
        {
          value:2,
          label:'七天结'
        },
        {
          value:3,
          label:'出院结'
        }
      ],
      rules: {
          name: [
            { required: true, message: '请输入医院名称', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择医院类型', trigger: 'change' }
          ],
          level: [
            { required: true, message: '请选择医院等级', trigger: 'change' }
          ],
          province: [
            { required: true, message: '请选择所在地区', trigger: 'change' }
          ]
        }
    }
  },
  components: {
    UserAddress
  },
  mounted(){
    this.editInit();
  },
  methods: {
    getArea(){
      let addressParams = this.$refs.hosAddAddress.getData();
      this.ruleForm.province = addressParams.province;
      this.ruleForm.city = addressParams.city;
      this.ruleForm.country = addressParams.country;
    },
    editInit(){
      let { type, id } = this.$route.query;
      if( type === 'edit' ) this.activeheader = headers[1];
      if( !id ) return;
      this.loading = true;      
      this.api.get(`/hospital/${id}`).then((res) => { //查询产品详情
        this.ruleForm=res.data;
        this.defaultAddress={
          province: this.ruleForm.province,
          city: this.ruleForm.city,
          country: this.ruleForm.country
        }
        this.loading = false;
        if(this.ruleForm.publicTrans==true){
           this.ruleForm.publicTrans='0'
          }else{
            this.ruleForm.publicTrans='1';
          }
      }).catch((err) => {
        console.log(err)
        this.loading = false;
        this.$message(err.data.message)
      })
    },
    submit(){
      if(this.ruleForm.publicTrans=='0'){
        this.ruleForm.publicTrans=true
      }else{
        this.ruleForm.publicTrans=false;
      }
      let addressParams = this.$refs.hosAddAddress.getData();
      this.ruleForm.province=addressParams.province;
      this.ruleForm.city=addressParams.city;
      this.ruleForm.country=addressParams.country;
      delete this.ruleForm.operatorId;
      delete this.ruleForm.createTime;
      delete this.ruleForm.updateTime;
      delete this.ruleForm.deleteFlag;
      delete this.ruleForm.handler;
      delete this.ruleForm.hibernateLazyInitializer;
      this.$refs['ruleForm'].validate((valid) => {
          if (valid) {
             this.addUser(this.ruleForm)
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
    editUser(param){ //修改用户
      param.id = this.ruleForm.id;
      this.loading = true; 
      this.api.put('/hospital',param, 'form').then((res)=>{
        this.loading = false; 
        this.$router.go(-1);
      }).catch((err) => {
        console.log(err)
        this.loading = false; 
        this.$message(err.data.message)
      })
    },
    addUser(param){ //添加用户
      if(this.$route.query.type === 'edit') return this.editUser(param);
      this.loading = true; 
      this.api.post('/hospital', param, 'form').then((res)=>{
        this.$message("添加医院成功！")  
        this.$router.go(-1);
        this.loading = false; 
      }).catch((err) => {
        console.log(err)
        this.loading = false; 
        this.$message(err.data.message)
      })
    },
    cancle(){
      this.$router.go(-1)
    }
  }
}
</script>
 
<style lang="less" scoped>
.box{
  padding-left: 20px;
  h3{
    margin-top: 10px;
    margin-bottom: 20px;
  }
}

</style>
 